import { Button, Form, Input } from 'antd-mobile'
import styles from '../css/ticket-order.module.css'
import { useDispatch, useSelector } from 'react-redux'
import { add, remove as removeUser } from '../../../store/slice/order'
import { useRef } from 'react'
import { ocrApi } from '../../../api/user'

function Passenger() {
  // 从全局，把乘车人的数据获取到组件中使用
  const passengers = useSelector((store) => store.order.passengers)
  const dispatch = useDispatch()
  const [form] = Form.useForm()
  const iptFile = useRef(null)
  const onFinish = () => {}

  const addPassenger = () => {
    // 只能改动到全局 Store 中的数据，无法修改表单中的数据
    dispatch(add({}))
    // 为表单中的 contacts 新增一个乘客
    const arr = form.getFieldValue('contacts')
    arr.push({})
  }

  const onFileChange = (e) => {
    const files = e.target.files
    // 没有选中图片
    if (files.length <= 0) return

    // 把选中的图片，转为 base64 的格式
    // 调用接口，进行身份证识别
    const fr = new FileReader()
    fr.readAsDataURL(files[0]) // 把文件转成 base64 的格式
    fr.onload = async () => {
      const { data: res } = await ocrApi({
        image: fr.result,
        client_id: 'wypYkEpDhZk8tFw0CsIMtVrV',
        client_secret: '2YFksrZIgxSAETKpvkkP1P7UQkAtEMv3'
      })
      console.log(res)
      const user = { name: res.name, idcard: res.code }
      // 往 Store 中存乘客数据
      dispatch(add(user))
      // 往页面的表单中存乘客的数据
      const arr = form.getFieldValue('contacts')
      arr.push(user)
    }
  }

  return (
    <div>
      <Form
        form={form}
        className={styles.form}
        layout="horizontal"
        onFinish={onFinish}
        // 表单的初始值
        initialValues={{
          // contacts 联系人（乘车人）的数组
          contacts: passengers
        }}
        mode="card"
      >
        <Form.Array
          name="contacts"
          onAdd={(operation) => operation.add({ name: '张三' })}
          renderHeader={({ index }, { remove }) => (
            <>
              <span>乘客{index + 1} - 成人票</span>
              <a
                onClick={() => {
                  // 从界面上移除乘客
                  remove(index)
                  // 从 Store 中移除乘客
                  dispatch(removeUser(index))
                }}
                style={{ float: 'right' }}
              >
                删除
              </a>
            </>
          )}
        >
          {(fields) =>
            fields.map(({ index }) => (
              <>
                <Form.Item
                  name={[index, 'name']}
                  label="姓名"
                  rules={[{ required: true, message: '姓名不能为空' }]}
                >
                  <Input placeholder="乘客姓名" />
                </Form.Item>
                <Form.Item
                  name={[index, 'idcard']}
                  label="身份证"
                  rules={[{ required: true, message: '证件号码不能为空' }]}
                >
                  <Input placeholder="证件号码" />
                </Form.Item>
              </>
            ))
          }
        </Form.Array>
      </Form>

      {/* 按钮区域 */}
      <div className={styles.btns}>
        <Button
          color="primary"
          fill="none"
          onClick={() => addPassenger()}
        >
          添加成人
        </Button>
        <Button
          color="primary"
          fill="none"
          onClick={() => {
            // 使用JS的方式，模拟文件选择器的点击操作
            iptFile.current?.click()
          }}
        >
          选择乘客
        </Button>
      </div>
      <input
        ref={iptFile}
        type="file"
        accept="image/*"
        onChange={onFileChange}
        style={{ display: 'none' }}
      />
    </div>
  )
}

export default Passenger
